<template>
  <div class="page-container data-report-serve">
    <div class="f-r a-c j-b">
      <div class="box-title">数据服务</div>
      <el-form inline>
        <el-form-item label="统计维度：">
          <el-radio-group v-model="searchParams.type">
            <el-radio :label="1" border>全市总览</el-radio>
            <el-radio :label="2" border>部门详情</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchParams.dept" placeholder="选择部门">
            <el-option
              v-for="item in deptOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card>
      <div class="f-r j-b f-w">
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psft7m055k26lu64oh5dpro9ru7mnya9pae6767d16-9eb7-4e6f-a5c2-c8b08acd7622"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">提供数据部门/区</span>
              <div class="text-wrapper_13" style="color: #5C95F6">
                <span class="text_49">47</span>
                <span class="text_50">个</span>
              </div>
            </div>
          </div>
          <div class="section_43 f-r j-b">
            <div class="text-wrapper_29 f-c j-b">
              <span class="text_51">区</span>
              <span class="text_52">部门</span>
            </div>
            <div class="group_35 f-r">
              <div class="image-text_16 f-r j-b">
                <div class="text-group_11 f-c j-b">
                  <span class="text_53">5个</span>
                  <span class="text_54">15个</span>
                </div>
              </div>
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psicxtcydd7wt35s4xlhvmck1i4x21gm61v3aa16888-a920-42ca-a367-9d8a7e072dd3"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">今日运行</span>
            <span class="text_56">109个</span>
          </div>
        </div>
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psft7m055k26lu64oh5dpro9ru7mnya9pae6767d16-9eb7-4e6f-a5c2-c8b08acd7622"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">提供数据库表</span>
              <div class="text-wrapper_13" style="color: #15D2B9">
                <span class="text_49">247</span>
                <span class="text_50">个</span>
              </div>
            </div>
          </div>
          <div class="section_43 f-r j-b">
            <div class="text-wrapper_29 f-c j-b">
              <span class="text_51">共享</span>
              <span class="text_52">非共享</span>
            </div>
            <div class="group_35 f-r">
              <div class="image-text_16 f-r j-b">
                <div class="text-group_11 f-c j-b">
                  <span class="text_53">12个</span>
                  <span class="text_54">12个</span>
                </div>
              </div>
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psicxtcydd7wt35s4xlhvmck1i4x21gm61v3aa16888-a920-42ca-a367-9d8a7e072dd3"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">今日新增</span>
            <span class="text_56">0个</span>
          </div>
        </div>
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psft7m055k26lu64oh5dpro9ru7mnya9pae6767d16-9eb7-4e6f-a5c2-c8b08acd7622"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">提供接口数量</span>
              <div class="text-wrapper_13" style="color: #FFAD2F">
                <span class="text_49">4277</span>
                <span class="text_50">个</span>
              </div>
            </div>
          </div>
          <div class="section_43 f-r j-b" />
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psicxtcydd7wt35s4xlhvmck1i4x21gm61v3aa16888-a920-42ca-a367-9d8a7e072dd3"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">今日新增</span>
            <span class="text_56">0个</span>
          </div>
        </div>
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psft7m055k26lu64oh5dpro9ru7mnya9pae6767d16-9eb7-4e6f-a5c2-c8b08acd7622"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">库表授权次数</span>
              <div class="text-wrapper_13" style="color: #FF6E6E">
                <span class="text_49">189,247</span>
                <span class="text_50">次</span>
              </div>
            </div>
          </div>
          <div class="section_43 f-r j-b">
            <div class="text-wrapper_29 f-c j-b">
              <span class="text_51">周同比</span>
              <span class="text_52">日环比</span>
            </div>
            <div class="group_35 f-r">
              <div class="image-text_16 f-r j-b">
                <div class="text-group_11 f-c j-b">
                  <span class="text_53">12%</span>
                  <span class="text_54">12%</span>
                </div>
                <img
                  class="thumbnail_27"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/psg1p7xwxli7vwqzje8d4zop1bbjvvt7ass82c0f6c5-f263-482d-b159-87d1d5ae4e2e"
                >
              </div>
              <img
                class="thumbnail_28"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4zdysf5pmu9220h74gkgpshalyr6etkl38a0290c-afe5-4d45-8783-10ebef5e875e"
              >
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psicxtcydd7wt35s4xlhvmck1i4x21gm61v3aa16888-a920-42ca-a367-9d8a7e072dd3"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">今日授权</span>
            <span class="text_56">1,809</span>
          </div>
        </div>
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psft7m055k26lu64oh5dpro9ru7mnya9pae6767d16-9eb7-4e6f-a5c2-c8b08acd7622"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">接口授权次数</span>
              <div class="text-wrapper_13" style="color: #9374FF">
                <span class="text_49">189,247</span>
                <span class="text_50">次</span>
              </div>
            </div>
          </div>
          <div class="section_43 f-r j-b">
            <div class="text-wrapper_29 f-c j-b">
              <span class="text_51">周同比</span>
              <span class="text_52">日环比</span>
            </div>
            <div class="group_35 f-r">
              <div class="image-text_16 f-r j-b">
                <div class="text-group_11 f-c j-b">
                  <span class="text_53">12%</span>
                  <span class="text_54">12%</span>
                </div>
                <img
                  class="thumbnail_27"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/psg1p7xwxli7vwqzje8d4zop1bbjvvt7ass82c0f6c5-f263-482d-b159-87d1d5ae4e2e"
                >
              </div>
              <img
                class="thumbnail_28"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4zdysf5pmu9220h74gkgpshalyr6etkl38a0290c-afe5-4d45-8783-10ebef5e875e"
              >
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psicxtcydd7wt35s4xlhvmck1i4x21gm61v3aa16888-a920-42ca-a367-9d8a7e072dd3"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">今日授权</span>
            <span class="text_56">1,809</span>
          </div>
        </div>
        <div class="block_1 f-c">
          <div class="section_41 f-r j-b">
            <img
              class="image_7"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psft7m055k26lu64oh5dpro9ru7mnya9pae6767d16-9eb7-4e6f-a5c2-c8b08acd7622"
            >
            <div class="section_42 f-c j-b">
              <span class="text_48">接口调用次数</span>
              <div class="text-wrapper_13" style="color: #FF6820">
                <span class="text_49">189,247</span>
                <span class="text_50">次</span>
              </div>
            </div>
          </div>
          <div class="section_43 f-r j-b">
            <div class="text-wrapper_29 f-c j-b">
              <span class="text_51">周同比</span>
              <span class="text_52">日环比</span>
            </div>
            <div class="group_35 f-r">
              <div class="image-text_16 f-r j-b">
                <div class="text-group_11 f-c j-b">
                  <span class="text_53">12%</span>
                  <span class="text_54">12%</span>
                </div>
                <img
                  class="thumbnail_27"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/psg1p7xwxli7vwqzje8d4zop1bbjvvt7ass82c0f6c5-f263-482d-b159-87d1d5ae4e2e"
                >
              </div>
              <img
                class="thumbnail_28"
                referrerpolicy="no-referrer"
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4zdysf5pmu9220h74gkgpshalyr6etkl38a0290c-afe5-4d45-8783-10ebef5e875e"
              >
            </div>
          </div>
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psicxtcydd7wt35s4xlhvmck1i4x21gm61v3aa16888-a920-42ca-a367-9d8a7e072dd3"
          >
          <div class="text-wrapper_30 f-r j-b">
            <span class="text_55">今日调用</span>
            <span class="text_56">1,809</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-row :gutter="40">
      <el-col :span="12">
        <div class="f-r a-c j-b" style="margin: 20px 0;height: 40px">
          <div class="box-title">新增趋势分析</div>
        </div>
        <el-card shadow="none">
          <div class="card-box">
            <el-radio-group v-model="radiovalue1">
              <el-radio-button label="1">日</el-radio-button>
              <el-radio-button label="2">月</el-radio-button>
              <el-radio-button label="3">年</el-radio-button>
            </el-radio-group>
            <div class="chart-box">
              <v-chart autoresize style="width: 100%;height: 100%;" :option="option1" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <div class="f-r a-c j-b" style="margin: 20px 0">
          <div class="box-title">部门TOP排行</div>
          <el-radio-group v-model="radiovalue2">
            <el-radio-button label="1">库表授权次数</el-radio-button>
            <el-radio-button label="2">接口授权次数</el-radio-button>
          </el-radio-group>
        </div>
        <el-card shadow="none">
          <div class="card-box">
            <div class="chart-box">
              <v-chart autoresize style="width: 100%;height: 100%;" :option="option2" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const colors = ['#FFC1BF', '#FFDB85', '#45EFC8', 'rgba(112, 168, 246, 1)']
import * as echarts from 'echarts'
export default {
  name: 'DataReportServe',
  data() {
    return {
      searchParams: {
        type: 1,
        dept: '',
        time: ' '
      },
      deptOptions: [],
      radiovalue1: '1',
      option1: {},
      radiovalue2: '1',

      option2: {},
      categoryList: [
        {
          name: '提供数据部门/区',
          value: 47,
          unit: '个',
          img: '',
          textList: [
            { name: '区', value: '5', unit: '个', color: colors[0] },
            { name: '部门', value: '5', unit: '个', color: colors[3] }
          ],
          today: {
            name: '今日运行',
            value: 139,
            unit: '1'
          }
        }
      ]
    }
  },
  created() {
    this.option1 = this.getOption1([
      {
        name: '数据库表',
        color: '',
        data: [
          { name: '2020-03', value: 10 },
          { name: '2020-04', value: 20 },
          { name: '2020-05', value: 30 },
          { name: '2020-06', value: 40 },
          { name: '2020-07', value: 50 }
        ]
      },
      {
        name: '数据接口',
        color: '',
        data: [
          { name: '2020-03', value: 50 },
          { name: '2020-04', value: 20 },
          { name: '2020-05', value: 40 },
          { name: '2020-06', value: 90 },
          { name: '2020-07', value: 80 }
        ]
      }
    ])
    this.option2 = this.getOption2()
  },
  methods: {
    getOption1(data) {
      const colors = ['#3CE9C8', '#4C86F6']
      return {
        color: colors,
        legend: {
          show: true,
          right: 60,
          top: 10,
          itemWidth: 30,
          itemHeight: 4,
          itemGap: 20,
          icon: 'rect',
          data
        },
        grid: {
          left: 20,
          right: '0',
          top: 90,
          bottom: 20,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['2020-03', '2020-04', '2020-05', '2020-06', '2020-07'],
          textStyle: {
            color: '#999999'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
            }
          }
        },
        yAxis: {
          type: 'value',
          textStyle: {
            color: '#999999'
          }

        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        series: data.map((el) => {
          return {
            name: el.name,
            type: 'line',
            symbol: 'none',
            smooth: true,
            itemStyle: {
              color: el.color
            },
            data: el.data.map(el => {
              return {
                value: el.value,
                name: el.name
              }
            })
          }
        })
      }
    },
    getOption2() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          top: 0,
          left: 0,
          right: 50,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          type: 'value',
          textStyle: {
            color: '#999999'
          },
          axisTick: {
            show: false
          },
          axisLabel: { show: false },
          axisLine: {
            show: false,
            lineStyle: {
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          inverse: true,
          type: 'category',
          data: ['1.交通局', '2.水务局', '3.水务局', '4.水务局', '5.水务局', '6.交通局', '7.水务局', '8.水务局', '9.水务局', '10.水务局'],
          textStyle: {
            color: '#999999'
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 30,
            data: [1000, 900, 800, 700, 600, 500, 400, 300, 200, 100],
            label: {
              show: true,
              position: 'right',
              color: '#427DF6',
              fontSize: 16
            },
            itemStyle: {
              normal: {
                barRadius: [0, 5, 5, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: '#427DF6'
                }, {
                  offset: 1,
                  color: '#70A8F6'
                }])
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
.data-report-serve{
  .card-box {
    position: relative;
    height: 400px;
    .chart-box {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
    }
  }
  .el-radio {
    width: 220px;
    height: 40px;
    margin-right: 20px;
    background: #fff;
  }
  .block_1 {
    background-color: rgba(255, 255, 255, 1);
    width: 491px;
    height: 281px;
    border: 1px solid rgba(236, 240, 248, 1);
  }
  .block_1:nth-of-type(1),
  .block_1:nth-of-type(2),
  .block_1:nth-of-type(3){
    margin-bottom: 40px;
  }
  .section_41 {
    width: 245px;
    height: 74px;
    margin: 38px 0 0 27px;
  }
  .image_7 {
    width: 79px;
    height: 71px;
    margin-top: 3px;
  }
  .section_42 {
    width: 137px;
    height: 70px;
  }
  .text_48 {
    width: 124px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(26, 26, 26, 1);
    font-size: 20px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 20px;
  }
  .text-wrapper_13 {
    width: 135px;
    height: 28px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
    margin: 21px 0 0 2px;
  }
  .text_49 {
    width: 135px;
    height: 28px;
    overflow-wrap: break-word;
    font-size: 30px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
  }
  .text_50 {
    width: 135px;
    height: 28px;
    overflow-wrap: break-word;
    font-size: 18px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
  }
  .section_43 {
    width: 149px;
    height: 47px;
    margin: 36px 0 0 26px;
  }
  .text-wrapper_29 {
    width: 42px;
    height: 40px;
    margin-top: 4px;
  }
  .text_51 {
    width: 42px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(26, 26, 26, 1);
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
  }
  .text_52 {
    width: 40px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(26, 26, 26, 1);
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin: 12px 0 0 2px;
  }
  .group_35 {
    width: 72px;
    height: 47px;
  }
  .image-text_16 {
    width: 72px;
    height: 43px;
  }
  .text-group_11 {
    width: 37px;
    height: 41px;
    margin-top: 2px;
  }
  .text_53 {
    width: 36px;
    height: 15px;
    overflow-wrap: break-word;
    color: rgba(239, 52, 61, 1);
    font-size: 18px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin-left: 1px;
  }
  .text_54 {
    width: 36px;
    height: 15px;
    overflow-wrap: break-word;
    color: rgba(41, 202, 176, 1);
    font-size: 18px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin-top: 11px;
  }
  .thumbnail_27 {
    width: 16px;
    height: 20px;
  }
  .thumbnail_28 {
    width: 16px;
    height: 20px;
    margin: 27px 0 0 -16px;
  }
  .image_8 {
    width: 434px;
    height: 2px;
    margin: 27px 0 0 26px;
  }
  .text-wrapper_30 {
    width: 433px;
    height: 17px;
    margin: 20px 0 20px 26px;
  }
  .text_55 {
    width: 64px;
    height: 17px;
    overflow-wrap: break-word;
    color: rgba(26, 26, 26, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }
  .text_56 {
    width: 42px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(26, 26, 26, 1);
    font-size: 16px;
    font-family: MicrosoftYaHei;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin-top: 1px;
  }
}
</style>
